div{
    width: 100%;
    height: 100px;
    background-color: orange;
    margin: 0 auto 20px auto;
    border: 2px solid black;
    box-sizing: border-box;
}

.d1{
    animation-name: couleur, essuieglace, taille;
    animation-duration: 10s, 2s;
}

@keyframes couleur{
    from{background-color: orange;}
    50%{background-color: purple;}
    to{background-color: orange;}
}

@keyframes taille{
    from{width: 100%}
    50%{width: 50%;}
    to{width: 100%;}
}
@keyframes essuieglace{
    from{margin-top: 0px;}
    50%{margin-top: 100px;}
    to{margin-top : 0px;}
}